<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div id="dashboard-widget">
    <div class="dashboard-div" @click="selectWidget">
      <span style="color: #2A2D2E" v-if="appletCategoryInfo">{{appletCategoryInfo.categoryName}}</span>
      <span style="color: rgba(0,0,0,0.25)" v-else>请选择工作台部件</span>
      <i class="el-icon-caret-bottom"></i>
    </div>
    <transition name="slide-fade">
      <div class="dashboard-ccard" v-if="openState" @click="stopClose">
        <el-card class="widget-card" style="border-radius: 4px 0 0 4px">
          <div class="widget-card-head">
            <span class="widget-card-num">{{appletCategoryList.length}}条</span>
            <span class="widget-card-title">应用分类 </span>
          </div>
          <!--<hr style="background: rgba(0,0,0,0.09);"/>-->
          <hr/>
          <el-input
            placeholder="请输入搜索内容"
            suffix-icon="el-icon-search"
            v-model="categoryName" class="widget-card-search" @change="loadAppletCategoryList">
          </el-input>
          <div class="widget-category">
            <div v-for="appletCategory in appletCategoryList" @click="selectCategory($event,appletCategory)"
                 :class="{stylebag:appletCategoryId==appletCategory.appletCategoryId}">
            <span>
           {{appletCategory.categoryName}}
            </span>
              <i class="el-icon-arrow-right" style="float: right;line-height: 32px;height: 32px"></i>
            </div>
          </div>
        </el-card>
        <el-card class="widget-card" style="border-radius: 0 4px 4px 0;margin-left: -5px"
                 v-if="appletsList.length">
          <div class="widget-card-head">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
                         id="check-box-all"></el-checkbox>
            <span class="widget-card-num-two">{{appletsList.length}}条</span>
            <span class="widget-card-title">应用部件</span>
          </div>
          <hr/>
          <el-input
            placeholder="请输入搜索内容"
            suffix-icon="el-icon-search"
            v-model="appletName" class="widget-card-search" @change="loadAppletList">
          </el-input>
          <el-checkbox-group class="widget-applet" v-model="grantedApplets" @change="checkChange">
            <el-checkbox v-for="applet in appletsList" id="applet-checkbox"
                         :key="applet.appletId"
                         :label="applet.appletId" :value="applet.appletId" @change="changeApplet(applet)">
        <span>
        {{applet.appletName}}
        </span>
            </el-checkbox>
          </el-checkbox-group>
        </el-card>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "DashboardWidgetSelect",
    props: ['value', 'placeholder', 'typeTags', 'applets', 'admin'],
    created() {
      this.loadAppletCategoryList()
    },
    mounted() {

    },
    data() {
      return {
        appletCategoryList: [],
        appletCategoryInfo: null,
        appletCategoryId: null,
        appletsList: [],
        grantedApplets: [],
        openState: false,
        categoryName: null,
        appletName: null,
        checkAll: false,
        isIndeterminate: false
      }
    },
    methods: {
      // 单个选择/取消
      changeApplet(applet) {
        var add = true
        if (this.grantedApplets.indexOf(applet.appletId) < 0) {
          add = false
        }
        this.$emit("returnApplet", {appletId: applet.appletId, routeUrl: applet.routeUrl, add: add});
      },
      // 获取应用分类及分类下的应用数据
      loadAppletCategoryList() {
        // this.appletsList = []
        const url = '/joys-rest/joys-master-data/appletCategories'
        this.$http.get(url, {
          params: {
            typeTags: ['WIDGET'],
            admin: true,
            categoryName: this.categoryName
          }
        }).then(resp => {
          this.appletCategoryList = resp.data
          if (this.appletsList.length) {
            this.appletCategoryInfo = this.appletCategoryList[0]
            this.appletCategoryId = this.appletCategoryList[0].appletCategoryId
          }
        }, resp => {
          this.$message.error(resp.data)
        })
      },
      // 查询应用
      loadAppletList() {
        // 能查询到当前租户下的所有应用部件（暂时不做角色应用过滤）TODO
        const url = '/joys-rest/joys-master-data/applets/admin'
        this.$http.get(url, {
          params: {
            typeTags: ['WIDGET'],
            admin: true,
            appletName: this.appletName,
            appletCategoryId: this.appletCategoryId
          }
        }).then(resp => {
          this.appletsList = resp.data
          this.checkChange()
        }, resp => {
          this.$message.error(resp.data)
        })
      },
      // 选择工作台部件
      selectWidget(e) {
        if (this.openState) {
          this.openState = false
          document.removeEventListener('click', this.closeWidget)
        } else {
          this.openState = true
          //阻止事件冒泡，目的是防止触发onOutsideClick
          e.stopPropagation()
          //在body上增加click事件回调，目的是实现外部区域点击关闭弹框
          document.addEventListener('click', this.closeWidget)
        }
      },
      // 关闭
      closeWidget(e) {
        this.openState = false
        document.removeEventListener('click', this.closeWidget)
      },
      // 组件区域内点击不会关闭
      stopClose(e) {
        //阻止事件冒泡，目的是防止触发onOutsideClick
        e.stopPropagation()
      },
      // 选择应用分类-查询应用
      selectCategory(e, value) {
        this.appletsList = value.appletVOS
        this.appletCategoryInfo = value
        this.appletCategoryId = value.appletCategoryId
      },
      // 全选/取消全选
      handleCheckAllChange(val) {
        let applets = this.appletsList
        if (val) {// 全选
          for (let i = 0; i < applets.length; i++) {
            if (this.grantedApplets.indexOf(applets[i].appletId) < 0) {
              this.grantedApplets.push(applets[i].appletId)
              this.changeApplet(applets[i])
            }
          }
        } else {// 取消全选
          for (let j = this.grantedApplets.length - 1; j > -1; j--) {
            let appletId = this.grantedApplets[this.grantedApplets.length - 1]
            this.grantedApplets.splice(this.grantedApplets.length - 1, 1)
            for (let k = 0; k < applets.length; k++) {
              if (appletId === applets[k].appletId) {
                this.changeApplet(applets[k])
                break
              }
            }
          }
        }
      },
      // 选中改变“全选”状态
      checkChange() {
        if (!this.appletCategoryId || !this.appletsList) {
          return
        }
        let applets = this.appletsList
        let checkedCount = 0
        for (let i = 0; i < applets.length; i++) {
          if (this.grantedApplets.indexOf(applets[i].appletId) > 0) {
            checkedCount++
          }
        }
        if (checkedCount && this.appletsList.length === checkedCount) {//全选
          this.checkAll = true;
          this.isIndeterminate = false;
        } else if (checkedCount && checkedCount < this.appletsList.length) {//部分选中
          this.isIndeterminate = true;
          this.checkAll = false;
        } else {//未选
          this.checkAll = false;
          this.isIndeterminate = false;
        }
      }
    },
    watch: {
      typeTags() {
        this.loadAppletCategoryList()
      },
      value() {
        this.grantedApplets = this.value
        // this.checkChange()
      },
      appletCategoryId() {
        this.loadAppletList()
      },
    }
  }
</script>

<style scoped>

  #dashboard-widget {
    min-width: 352px;
    margin: 0;
    padding: 0;
  }

  .dashboard-div {
    line-height: 32px;
    height: 32px;
    width: 156px;
    background-color: #FFFFFF;
    border: 1px solid #D2D2D7;
    border-radius: 2px;
    margin-bottom: 9px;
    cursor: pointer;
  }

  .dashboard-div span {
    font-family: PingFangSC-Regular;
    /*color: rgba(0,0,0,0.25);*/
    letter-spacing: 0;
    margin-left: 8px
  }

  .dashboard-div i {
    float: right;
    line-height: 32px;
    margin-right: 12px;
    color: #D2D2D7;
  }

  .dashboard-ccard {
    position: absolute;
    z-index: 2001
  }

  .dashboard-ccard::before {
    content: "";
    display: block;
    background-color: #FFFFFF;
    height: 8px;
    width: 8px;
    transform: rotate(45deg);
    margin-left: 38px;
    margin-bottom: -5px;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .widget-card {
    display: inline-block;
    width: 176px;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
  }

  .widget-card-head {
    height: 39px;
    line-height: 39px
  }

  .widget-card-num {
    font-family: HelveticaNeue;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-left: 16px
  }

  .widget-card-num-two {
    font-family: HelveticaNeue;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-left: 5px
  }

  .widget-card-title {
    float: right;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    margin-right: 11px
  }

  .widget-card hr {
    background-color: #000000;
    opacity: 0.09;
    height: 1px;
    margin: 0;
  }

  .widget-card-search {
    height: 32px;
    width: 168px;
    margin: 1px 4px 0 4px;
    padding-right: 2px;
  }

  .widget-card >>> .el-card__body {
    padding: 0;
  }

  /***应用分类样式**/
  .widget-category {
    padding: 0;
    margin: 0;
    height: 162px;
    overflow-y: scroll;
  }

  .stylebag {
    background: #E6F7FF;
  }

  .widget-category div {
    margin: 0;
    padding: 0 14px 0 16px;
    /*width: 174px;*/
    cursor: pointer;
  }

  .widget-category span {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    height: 32px;
    line-height: 32px;
  }

  .widget-category::-webkit-scrollbar { /*滚动条里面小方块*/
    width: 5px;
  }

  .widget-category::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 19px;
    /*-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);*/
  }

  /***应用样式**/
  .widget-applet {
    padding: 0;
    margin: 0;
    height: 162px;
    overflow-y: scroll;
  }

  .widget-applet::-webkit-scrollbar { /*滚动条里面小方块*/
    width: 5px;
  }

  .widget-applet::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 19px;
    /*-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);*/
  }

  .widget-applet >>> .el-checkbox {
    padding-left: 12px;
    margin-left: 0
  }

  .widget-applet span {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    height: 32px;
    line-height: 32px;
  }

  #check-box-all {
    padding-left: 14px;
  }

  #check-box-all >>> .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #1890FF;
    border-color: #1890FF;
  }

  #applet-checkbox >>> .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #1890FF;
    border-color: #1890FF;
  }

  /***渐变动画**/
  .slide-fade-enter-active {
    transition: all .5s ease;
  }

  .slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateY(-5px);
    opacity: 0;
  }
</style>
